//设置基地址
axios.defaults.baseURL = 'http://ajax-api.itheima.net'

//获取元素
const lists = document.querySelector('.top')

//发起数据请求，获取第一层数据
axios.get('/api/category/top').then(({ data: res }) => {
const newArr=res.data.map((item) => {
   return axios.get('/api/category/sub?id='+item.id)
})
  //这里Promise.all不能调用then方法，结果是undefined,所以可以考虑把Promise.all(newArr)整体返回出去，
 //链式调用中,下一个.then方法的参数就是上一个.then方法的结果，
//Promise.all(newArr)的返回值是一个Promise对象，第二个.then的调用者就是这个Promise对象，参数就是Promise对象的结果
return Promise.all(newArr)
}).then((res) => {
  lists.innerHTML = res.map(({ data: item }) => {
  console.log(item);
    return ` <li>
    <a href="javascript:;">${item.data.name}</a>
    <img
      src="${item.data.picture}"
      alt=""
    />
    <ul class="sub">
    ${item.data.children.map((item) => {
      return ` <li>
      <a href="javascript:;">
        <span>${item.name}</span>
        <img
          src="${item.picture}"
          alt=""
        />
      </a>
    </li>`
    }).join('')}
    </ul>
  </li>`
  }).join('')
})